<section>

    <div class="help-content">
        <h3 class="info-title smaller" data-id="#pages/gallery">Gallery</h3>
        <!-- #section:pages/gallery -->
        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    For slideshow <a href="#plugins/misc.colorbox" class="help-more">Colorbox plugin</a> is used.
                    <br/>
                    For more info about gallery page see:
                    <br/>
                    <code data-open-file="html" class="open-file"><span
                            class="brief-show">mustache/app/views/pages/</span>gallery.mustache</code>
                </li>

                <li>
                    Thumbnails are inside <code>ul.ace-thumbnails</code>:
<pre data-language="html">
 <ul class="ace-thumbnails clearfix">
     <li>
         ....
     </li>
 </ul>
</pre>
                </li>

                <li>
<pre data-language="html">
<li>
    <a data-rel="colorbox" title="Photo Title" href="path/to/image-1.jpg">
        <img src="path/to/thumb-1.jpg" alt="150x150"/>
        <!-- optional tags here -->
        <!-- optional caption here -->
    </a>
    <!-- optional tags here -->
    <!-- optional caption here -->
    <!-- optional tools -->
</li>
</pre>
                </li>

                <li>
                    <!-- #section:pages/gallery.tags -->
                    Tags are bootstrap <a href="#elements.label" class="help-more">labels</a>
                    inside a <code>.tags</code> container, wrapped inside <code>.label-holder</code>:
<pre data-language="html">
<div class="tags">
  <span class="label-holder">
    <span class="label label-info">tag1</span>
  </span>
    ...
</div>
</pre>
                    <!-- /section:pages/gallery.tags -->
                </li>

                <li>
                    <!-- #section:pages/gallery.tools -->
                    Tools are inside <code>.tools</code> with 4 positions:
                    <ol>
                        <li><code>.tools</code></li>
                        <li><code>.tools.tools-bottom</code></li>
                        <li><code>.tools.tools-left</code></li>
                        <li><code>.tools.tools-right</code></li>
                    </ol>
                    You can also add <code>.in</code> class to make it visible by default:
				
<pre data-language="html">
<a data-rel="colorbox" title="Photo Title" href="path/to/image-1.jpg">
    <img src="path/to/thumb-1.jpg" alt="150x150"/>
</a>
<div class="tools tools-bottom">
    <a href="#"><i class="ace-icon fa fa-link"></i></a>
    <a href="#"><i class="ace-icon fa fa-paperclip"></i></a>
</div>
</pre>
                    <!-- /section:pages/gallery.tools -->
                </li>

                <li>
                    <!-- #section:pages/gallery.caption -->
                    Optional caption:
<pre data-language="html">
 <div class="text">
     <div class="inner">Sample Caption on Hover</div>
 </div>
</pre>
                    with optional links:
<pre data-language="html">
<img src="path/to/thumb-1.jpg" alt="150x150"/>
<div class="text">
    <div class="inner">
        <span>Some Title!</span>
        <br/>
        <a data-rel="colorbox" href="path/to/image-1.jpg"><i class="ace-icon fa fa-search-plus"></i></a>
        <a href="#" title="Share"><i class="ace-icon fa fa-share"></i></a>
    </div>
</div>
</pre>
                    <!-- /section:pages/gallery.caption -->
                </li>

            </ul>
        </div>
        <!-- /section:pages/gallery -->

    </div>
</section>